<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文本超出省略 */
        /* 多行 */
        div a {
            display: inline-block;
            width: 400px;
            height: 60px;
            line-height: 30px;

            /* 行数 */
            -webkit-line-clamp: 2;
            /* 竖排 */
            -webkit-box-orient: vertical;
            /* 设置为盒子 */
            display: -webkit-box;
            /* 兼容性较差 */

            /* 超出隐藏 */
            overflow: hidden;
        }

        /* 单行 ！！！！！！ */
        div p {
            width: 400px;
            overflow: hidden;
            /* 强制不换行 */
            white-space: nowrap;
            /* 添加省略号 ellipsis=>省略号*/
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>

    <div>
        <a href="#">“圆”在习近平总书记心中有着特殊的含义。他在不同场合发表过一系列重要论述，如统一战线同心圆、军民融合同心圆、网上网下同心圆、新型国际关系同心圆等，为中国和世界擘画一个又一个美丽的“同心圆”。</a>
        <p>平总书记心中有着特殊的含义。他在不同场合发表过一系列重要</p>
    </div>

</body>

</html>